<template>
	<view class="wrapper">
		<dimg :src="userId | avatar" mode="aspectFill" class="avatar"></dimg>
		<view class="f30 c333 tCenter">
			{{userinfo.friends.remarkName || userinfo.nickname}}
		</view>
		<view class="money_box">
			<view class="f30 c333">
				转账金额
			</view>
			<view class="center ipnut_box">
				¥
				<input type="number" class="flex" v-model="money"/>
			</view>
			<view class="f26 ctheme" @tap="alertTitle='添加收钱说明'">
				{{remark==''?'添加收钱说明':remark}}
			</view>
			<view class="center cfff f30 btn" @tap="alertTitle='请输入支付密码'">
				转账
			</view>
		</view>
		<alert :alertTitle="alertTitle" v-if="alertTitle" :showInput="true" @alertConfirm='alertConfirm'></alert>
	</view>
</template>

<script>
	import WEBIM from '@/common/webim.js';
	import alert from '@/components/alert/alert.vue'
	import md5 from '@/common/md5.min.js'
	export default {
		data() {
			return {
				userId:'',
				userinfo:'',
				money:'',
				alertTitle:'',
				remark:''
			};
		},
		onLoad(e) {
			this.userId=e.toUserId
			this.userGet()
		},
		methods:{
			sendTransfer(payPassword) {
				let that = this,
					time=parseInt(new Date().getTime()/1000 ),
					userid=uni.getStorageSync('userinfo').userId,
					token=uni.getStorageSync('userinfo').access_token
				this.$ajax(this.apiList.sendTransfer, {
					toUserId: this.userId,
					money:this.money,
					secret:md5(md5(this.apikey+time+this.money)+userid+token+md5(payPassword)),
					remark:this.remark
				}).then(res => {
					this.$sToast('转账成功')
					// 发送已转账
					var msg = WEBIM.createMessage(29, this.money, this.userId, this.userinfo.nickname, 'chat');
					msg.id = msg.messageId;
					msg.fileName=this.remark
					msg.objectId=res.data.id
					WEBIM.sendMessage(msg);
					this.$back(1,1500)
				});
			},
			alertConfirm(type,text){
				if(type==1){
					if(this.alertTitle=='添加收钱说明'){
						this.remark=text
					}else{
						this.sendTransfer(text)
					}
				}
				this.alertTitle=''
			},
			// 查询用户信息
			userGet() {
				let that = this;
				this.$ajax(this.apiList.userGet, {
					userId: this.userId
				}).then(res => {
					this.userinfo = res.data;
				});
			}
		},
		components:{alert}
	}
</script>

<style lang="scss">
.money_box{
	background: #FFFFFF;
	height: calc(100% - 242rpx);
	border-radius: 16rpx 16rpx 0 0;
	padding: 38rpx 61rpx;
	margin-top: 60rpx;
	.btn{
		width:640rpx;
		height:80rpx;
		background:rgba(2,151,254,1);
		border-radius:4rpx;
		margin-top: 20rpx;
	}
	.ipnut_box{
		font-size:72rpx;
		font-weight:bold;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #E0E0E0;
		margin: 40rpx 0 20rpx;
		input{
			padding-left: 25rpx;
			font-size:72rpx;
		}
	}
}
.avatar{
	width:94rpx;
	height:94rpx;
	border-radius:50%;
	margin: 30rpx auto;
	display: block;
	overflow: hidden;
}
page{
	background: #F3F3F3;
	overflow: hidden;
	height: 100%;
}
</style>
